<template>
  <div class="exam-result-container">
    <!-- 顶部导航 -->
    <div class="header">
      <van-icon name="arrow-left" class="back-icon" @click="navigateBack" />
      <h1 class="title">考试结果</h1>
    </div>

    <!-- 考试结果概览 -->
    <div class="result-overview">
      <div class="score-card">
        <div class="score-label">您的得分</div>
        <div class="score-value">{{ examResult.score }}</div>
        <div class="score-status">{{ getScoreStatus(examResult.score) }}</div>
      </div>

      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-value">{{ examResult.totalQuestions }}</div>
          <div class="stat-label">总题数</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ examResult.correctAnswers }}</div>
          <div class="stat-label">答对题数</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ examResult.wrongAnswers }}</div>
          <div class="stat-label">答错题数</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ formatTime(examResult.timeSpent) }}</div>
          <div class="stat-label">用时</div>
        </div>
      </div>
    </div>

    <!-- 答题详情 -->
    <div class="answer-details">
      <h2 class="section-title">答题详情</h2>
      <div class="question-list">
        <div v-for="question in examResult.questions" :key="question.id" class="question-item">
          <div class="question-header">
            <span class="question-number">第{{ question.number }}题</span>
            <span :class="`question-status status-${question.isCorrect ? 'correct' : 'wrong'}`">
              {{ question.isCorrect ? '正确' : '错误' }}
            </span>
          </div>
          <div class="question-content">{{ question.content }}</div>
          <div v-if="question.options" class="question-options">
            <div v-for="(option, index) in question.options" :key="index" class="option-item">
              <span :class="`option-letter ${question.userAnswer === index ? 'selected' : ''}`">
                {{ String.fromCharCode(65 + index) }}.
              </span>
              <span class="option-text">{{ option }}</span>
              <span v-if="question.correctAnswer === index" class="correct-mark">✓</span>
            </div>
          </div>
          <div v-if="question.userAnswer && !question.options" class="user-answer">
            <div class="answer-label">您的答案:</div>
            <div class="answer-content">{{ question.userAnswer }}</div>
          </div>
          <div v-if="question.correctAnswer && !question.options" class="correct-answer">
            <div class="answer-label">参考答案:</div>
            <div class="answer-content">{{ question.correctAnswer }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <van-button type="primary" block @click="retryExam">重新考试</van-button>
      <van-button type="default" block @click="navigateToHome">返回首页</van-button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showLoadingToast, showToast } from 'vant'
import { getExamResult } from '@/api/examApi'

export default {
  name: 'ExamResult',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const examResult = ref({
      score: 0,
      totalQuestions: 0,
      correctAnswers: 0,
      wrongAnswers: 0,
      timeSpent: 0,
      questions: []
    })
    const examId = ref(route.params.id)

    // 获取考试结果
    const fetchExamResult = () => {
      showLoadingToast({ message: '加载中...', duration: 0 })
      getExamResult(examId.value)
        .then(res => {
          if (res.success && res.data) {
            examResult.value = res.data
          } else {
            showToast('获取考试结果失败')
          }
        })
        .catch(err => {
          showToast('获取考试结果失败')
          console.error('获取考试结果失败:', err)
        })
        .finally(() => {
          showLoadingToast.clear()
        })
    }

    // 格式化时间
    const formatTime = (seconds) => {
      const minutes = Math.floor(seconds / 60)
      const remainingSeconds = seconds % 60
      return `${minutes}分${remainingSeconds}秒`
    }

    // 获取分数状态
    const getScoreStatus = (score) => {
      if (score >= 90) return '优秀'
      if (score >= 80) return '良好'
      if (score >= 60) return '及格'
      return '不及格'
    }

    // 导航回上一页
    const navigateBack = () => {
      router.go(-1)
    }

    // 重新考试
    const retryExam = () => {
      router.push(`/exam/${examId.value}`)
    }

    // 返回首页
    const navigateToHome = () => {
      router.push('/home')
    }

    // 初始化
    onMounted(() => {
      fetchExamResult()
    })

    return {
      examResult,
      formatTime,
      getScoreStatus,
      navigateBack,
      retryExam,
      navigateToHome
    }
  }
}
</script>

<style scoped>
.exam-result-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

.back-icon {
  color: white;
  font-size: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: white;
}

.result-overview {
  padding: 15px;
  background-color: white;
  margin: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.score-card {
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 15px;
}

.score-label {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

.score-value {
  font-size: 48px;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 5px;
}

.score-status {
  font-size: 16px;
  color: #4cd964;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.stat-item {
  text-align: center;
  padding: 10px;
  background-color: #f9fafb;
  border-radius: 8px;
}

.stat-value {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.answer-details {
  background-color: white;
  margin: 0 15px 15px;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.question-list {
  max-height: 400px;
  overflow-y: auto;
}

.question-item {
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.question-item:last-child {
  border-bottom: none;
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.question-number {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.question-status {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: white;
}

.status-correct {
  background-color: #4cd964;
}

.status-wrong {
  background-color: #ff3b30;
}

.question-content {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
}

.question-options {
  margin-bottom: 10px;
}

.option-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
}

.option-letter {
  font-weight: bold;
  margin-right: 8px;
  min-width: 20px;
  text-align: center;
}

.option-letter.selected {
  color: #667eea;
}

.option-text {
  flex: 1;
  font-size: 14px;
  color: #666;
}

.correct-mark {
  color: #4cd964;
  font-size: 16px;
  margin-left: 5px;
}

.user-answer, .correct-answer {
  margin-top: 10px;
}

.answer-label {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.answer-content {
  font-size: 14px;
  color: #666;
  padding: 8px;
  background-color: #f9fafb;
  border-radius: 4px;
}

.action-buttons {
  padding: 0 15px;
  margin-top: auto;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>